<template>
  <div class="chart-list-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>{{ pageTitle }}</h2>
      <el-button type="primary" :icon="Refresh" :loading="isLoading" @click="handleRefresh">
        刷新
      </el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
      v-loading="isLoading"
      :data="tableData"
      stripe
      border
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column prop="ID" label="ID" width="80" align="center" />
      <el-table-column prop="Name" label="名称" min-width="200" />
      <el-table-column prop="Group" label="分组" width="100" align="center" />
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click.stop="handleViewChart(row)">
            查看图表
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 错误提示 -->
    <el-alert
      v-if="hasError"
      :title="error"
      type="error"
      show-icon
      :closable="false"
      style="margin-top: 16px"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElTable, ElTableColumn, ElButton, ElAlert, ElEmpty } from "element-plus";
import { Refresh } from "@element-plus/icons-vue";
import { useChartData } from "@/composables/useChartData";
import type { ChartBaseInfo } from "@/api/hmi/chart.api";

defineOptions({
  name: "ChartList",
  inheritAttrs: false,
});

const router = useRouter();
const route = useRoute();

// 使用图表数据组合式函数
const { isLoading, error, hasError, fetchDataByApiPath, getChartBaseInfoList, currentType } =
  useChartData();

// 本地状态
const tableData = ref<ChartBaseInfo[]>([]);

// 计算属性
const pageTitle = computed(() => {
  const apiPath = route.meta?.params?.api as string;
  if (!apiPath) return "图表列表";

  if (apiPath.startsWith("hgraph")) return "谐波图列表";
  if (apiPath.startsWith("vplot")) return "矢量图列表";
  if (apiPath.startsWith("wplot")) return "波形图列表";
  return "图表列表";
});

// 获取数据
const loadData = async () => {
  try {
    const apiPath = route.meta?.params?.api as string;
    if (!apiPath) {
      ElMessage.error("缺少API参数");
      return;
    }

    await fetchDataByApiPath(apiPath);
    tableData.value = getChartBaseInfoList();
  } catch (err) {
    console.error("加载数据失败:", err);
    ElMessage.error("加载数据失败");
  }
};

// 刷新数据
const handleRefresh = async () => {
  await loadData();
  ElMessage.success("刷新成功");
};

// 行点击事件
const handleRowClick = (row: ChartBaseInfo) => {
  handleViewChart(row);
};

// 查看图表
const handleViewChart = (row: ChartBaseInfo) => {
  const apiPath = route.meta?.params?.api as string;
  if (!apiPath) {
    ElMessage.error("缺少API参数");
    return;
  }

  // 跳转到图表详情页面
  router.push({
    name: "ChartDetail",
    params: {
      type: currentType.value || "harmonic",
      id: row.ID.toString(),
    },
    query: {
      api: apiPath,
      name: row.Name,
    },
  });
};

// 组件挂载时加载数据
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.chart-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.el-table {
  margin-bottom: 20px;
}

:deep(.el-table__row) {
  cursor: pointer;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}
</style>
